<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 264 240"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path fill="#F2F7FF" d="M258.294 151.876c8.512-1.238 5.065-10.185.426-10.196-.362-4.655-5.108-8.328-10.906-8.328a13.183 13.183 0 0 0-2.128.171 6.792 6.792 0 0 0-2.586-2.419 6.757 6.757 0 0 0-3.447-.784c-3.628 0-6.576 2.402-6.576 5.338v.182a7.909 7.909 0 0 0-2.841-.534c-3.628 0-6.575 2.402-6.575 5.338-.004.36.039.719.127 1.068-3.106.31-5.5 2.456-5.5 5.061 0 2.818 2.798 5.103 6.267 5.103"/><path fill="#CCE0FF" d="M27.428 129.605.498 114.007l26.93-15.61 26.93 15.61-26.93 15.598Z"/><path fill="#E6F0FF" d="m54.358 138.616-26.93 15.599v-24.61l26.93-15.598v24.609Z"/><path fill="#B3D1FF" d="M27.428 154.215.498 138.616v-24.609l26.93 15.598v24.61Z"/><path fill="#CCE0FF" d="m31.46 56.585-16.946-9.816 16.946-9.823 16.947 9.823-16.947 9.816Z"/><path fill="#E6F0FF" d="M48.406 62.255 31.46 72.07V56.584l16.946-9.815v15.486Z"/><path fill="#B3D1FF" d="m31.46 72.07-16.946-9.815V46.769l16.946 9.815v15.487Z"/><path fill="#CCE0FF" d="m112.363 185.153-40.81-23.638 40.81-23.655 40.81 23.655-40.81 23.638Z"/><path fill="#E6F0FF" d="m153.173 198.81-40.81 23.638v-37.294l40.81-23.638v37.294Z"/><path fill="#B3D1FF" d="m112.363 222.448-40.81-23.638v-37.294l40.81 23.638v37.294Z"/><path fill="#CCE0FF" d="m209.046 206.574-36.577-21.186 36.577-21.2 36.576 21.2-36.576 21.186Z"/><path fill="#E6F0FF" d="m245.623 218.813-36.577 21.186v-33.425l36.577-21.186v33.425Z"/><path fill="#B3D1FF" d="m209.046 239.999-36.577-21.186v-33.425l36.577 21.186v33.425Z"/><path fill="#06F" d="M.498 15.277c16.14 10.997 23.897-7.793 32.271 4.271V2.295C17.81-5.488 19.586 11.797.498 15.277Zm151.961 28.487c1.181 0 2.362-.182 3.734-.246 1.373-.064 2.916-.48 2.99-1.762.053-1.067-1.223-2.039-.894-3.085a2.41 2.41 0 0 1 .469-.748 11.773 11.773 0 0 0-1.469-16.281c.351.139.745-.203.798-.577a1.527 1.527 0 0 0-.372-1.068 7.348 7.348 0 0 0-3.458-2.274 22.273 22.273 0 0 0-13.194-.448c-3.33.854-7.373 3.352-7.075 7.356a3.192 3.192 0 0 0 2.617 3c.585 4.27 2.724 7.292 5.427 10.495a17.207 17.207 0 0 0 6.756 4.965 9.473 9.473 0 0 0 3.671.673Z"/><path fill="#B3D1FF" d="M135.255 33.834s-3.192 4.922-2.543 5.936c.649 1.014 2.894.331 2.894.331"/><path fill="#B3D1FF" d="M135.914 27.342c-2.053 1.698-1.436 5.253-1.404 7.57 0 3.267.113 6.527.34 9.78.117 2.06 5.448 2.135 6.384 1.463l-.798 8.167 11.236-4.367-.489-6.747a6.772 6.772 0 0 1-3.443-1.27 6.81 6.81 0 0 1-2.282-2.883c-2.128-4.207-1.84-13.357-1.84-13.357s-5.703-.021-7.704 1.644Z"/><path fill="#B3D1FF" d="M134.913 42.257a2.632 2.632 0 0 0 3.851-1.067m2.725-5.295a4.485 4.485 0 0 1 .905-2.242c.314-.55.709-1.05 1.17-1.484a2.128 2.128 0 0 1 1.745-.545 1.988 1.988 0 0 1 1.277 1.004c.26.502.402 1.057.415 1.623a6.982 6.982 0 0 1-3.192 6.214l.181-.193"/><path fill="#CCE0FF" d="m153.885 51.962-.968-3.598-14.322.897-1.532 5.338a28.117 28.117 0 0 0 16.822-2.637Z"/><path fill="#B3D1FF" d="M101.908 73.242s-4.416-5.68-4.778-6.855c-.362-1.174-.393-3.576-1.32-5.242-.925-1.665-3.287-3.096-4.308-.747 0 0-.681-3.822-3.192-1.634a6.952 6.952 0 0 0-2.31 3.46 6.973 6.973 0 0 0 .075 4.164c.745 2.903 11.81 17.434 11.81 17.434M197.35 87.1s1.287 2.796 1.979 4.889a28.61 28.61 0 0 1 .83 6.01c.532-.608 1.362-.746 1.925-1.28a7.68 7.68 0 0 0 .564 2.54 2.636 2.636 0 0 0 1.947 1.559c.463.027.925-.038 1.362-.192 1.596-.491 4.256-1.388 4.608-3.299a3.817 3.817 0 0 0-.384-2.135c-1.149-2.85-6.384-10.314-7.288-11.52m-75.353 71.704s1.777 8.082-1.5 9.523c-3.277 1.442-21.578-11.103-20.61-14.21.968-3.107 6.778-4.644 12.374-.929a80.113 80.113 0 0 0 9.736 5.616Z"/><path fill="#E6F0FF" d="M159.599 115.82s-20.216 7.09-35.793 5.413l3.926 34.101s-5.671 2.552-12.63-5.21c0 0-9.257-41.564-5.426-43.88 3.83-2.317 40.432-2.638 40.432-2.638l9.491 12.214Z"/><path fill="#E6F0FF" d="M170.547 109.008s-.83 32.03.266 32.467c1.096.438 32.026 22.998 32.026 22.998l1.139 10.441s-43.252-18.63-45.539-24.406c-2.288-5.776-10.96-39.76-10.96-39.76l23.068-1.74Z"/><path fill="#06F" d="M125.582 62.267s1.202-7.036 21.567-10.773a30.025 30.025 0 0 1 14.758.822c.766 3.203 7.288 48.899 10.214 59.64 0 0-24.557 9.032-36.878-5.926 0 0-7.82-40.432-9.661-43.763Z"/><path fill="#CCE0FF" d="m203.876 135.581 33.899-15.081a3.806 3.806 0 0 0 1.927-5.015l-8.668-19.618a3.783 3.783 0 0 0-4.998-1.934l-33.898 15.08a3.806 3.806 0 0 0-1.928 5.015l8.668 19.619a3.783 3.783 0 0 0 4.998 1.934Z"/><path fill="#fff" d="M196.115 116.354a.542.542 0 0 1-.644-.422.544.544 0 0 1 .42-.646l32.293-14.36a.534.534 0 1 1 .425.982l-32.249 14.403a.516.516 0 0 1-.245.043Z"/><path fill="#06F" d="M156.714 51.077s20.568 4.655 25.536 7.762c4.969 3.107 24.749 24.332 24.749 24.332l-13.034 7.388s-12.279-14.851-15.896-16.986c-3.618-2.136-19.727-.395-19.727-.395l-1.628-22.1Zm-31.131 11.189S113.879 83.704 111.91 82.55c-1.968-1.153-10.353-13.88-10.353-13.88l-9.33 10.581s7.639 24.001 18.885 21.289c11.247-2.712 28.398-22.677 28.398-22.677l-13.927-15.598Z"/><path fill="#B3D1FF" d="M197.349 170.506c-2.32-7.591.181-11.115 2.905-11.264 2.723-.15 4.458-.577 6.607 6.865s2.341 19.218-1.905 19.858c-4.245.641-5.288-7.858-7.607-15.459ZM32.065 1.845h2.194v41.682h-2.194z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Group626693 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
